<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性</title>
  <style>
     div{
        border: 1px solid;
     }

     .box{
         width: 300px;
         height: 100px;
     }

  </style>
</head>
<body>

<div class="box" id="box1" >
      我在这里
</div>

<div>
  <button id="btnShow">显示</button>
  <button id="btnHide">隐藏</button>
  <button id="btnToggle">切换</button>
</div>

</body>
<script>

    var btnHide= document.getElementById('btnHide');
    var btnShow= document.getElementById('btnShow');
    var btnToggle= document.getElementById('btnToggle');

    btnHide.onclick = function (){

         var box1 =document.getElementById('box1');
         box1.style.display ='none';
    }


    btnShow.onclick = function (){
      var box1 =document.getElementById('box1');
      box1.style.display ='block';
    }


    btnToggle.onclick = function (){
      var box1 =document.getElementById('box1');

      if(box1.style.display=='none'){
        box1.style.display ='block';
      }else{
        box1.style.display ='none';
      }
    }


</script>
</html>